<template>
	<view class="inforamtion" style="display: flex;">
		<view>
			<view class="option" style="width: 520rpx;">
				<slot name="check"></slot>
			</view>
			<view class="option" style="width: 520rpx;">
				<view class="lf">采购大类</view>
				<view class="rl">{{  filterMultiDictText(dictOptions['provisionBroad'], item.provisionBroad + '') }}</view>
			</view>
			<view class="option" style="width: 520rpx;">
				<view class="lf">采购小类</view>
				<view class="rl">{{ filterMultiDictText(dictOptions['provisionSmall'], item.provisionSmall + '') }}</view>
			</view>
			<view class="option" style="width: 520rpx;">
				<view class="lf">物料名称</view>
				<view class="rl">{{ filterMultiDictText(dictOptions['materialName'], item.materialName + '') }}</view>
			</view>
			<view class="option" style="width: 520rpx;">
				<view class="lf">物料编号</view>
				<view class="rl">{{ item.materialBillId }}</view>
			</view>
			<view class="option" style="width: 520rpx;">
				<view class="lf">品牌</view> 
				<view class="rl"> {{ item.brand }} </view>
			</view>
			<view class="option" style="width: 520rpx;">
				<view class="lf">规格型号</view>
				<view class="rl">{{ item.specification }}</view>
			</view>
			<view class="option" style="width: 520rpx;">
				<view class="lf">单位</view>
				<view class="rl">{{ filterMultiDictText(dictOptions['unit'], item.unit + '') }}</view>
			</view>
			<view class="option" style="width: 520rpx;">
				<view class="lf">数量</view>
				<view class="rl">{{ item.amount }}</view>
			</view>
			<view class="option" style="width: 520rpx;">
				<view class="lf">单价(元)</view>
				<view class="rl">{{ item.unitPrice }}</view>
			</view>
			<view class="option" style="width: 520rpx;">
				<view class="lf">总价(元)</view>
				<view class="rl">{{ item.amount && item.unitPrice ? (Number(item.amount) * Number(item.unitPrice)).toFixed(2) : '0.00'  }}</view>
			</view>
			<view class="option" style="width: 520rpx;">
				<view class="lf">备注</view>
				<view class="rl">{{ item.remark }}</view>
			</view>
		</view>
		<view  style="flex: 1; display: flex; align-items: center; justify-content: flex-end;" v-if="!disabled">
			<u-icon name="edit-pen-fill" color="#2979ff" size="20" @click="handleEidtForm(item)"></u-icon>
			<u-line  direction="col" length="20" margin="0 10rpx"></u-line>
			<u-icon name="trash-fill" color="red" size="20"  @click="handleRemoveForm(item)"></u-icon>
		</view>
	</view>
</template>

<script>
import { queryByDepartment, queryProvisionBroadList, queryProvisionSmallList } from '@/api/purchase/ErpPurchaseCannibalizeForm'
import { filterMultiDictText, initDictOptions } from '@/utils/JDictSelectUtil.js'
export default {
  name: 'MaterialFormInfo',
  props: {
    index: {
      type: Number,
      default: null,
    },
    item: {
      type: Object,
      default: () => ({}),
    },
		disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      filterMultiDictText,
      initDictOptions,
      dictOptions: {},
      smallList: [],
      api: {
        queryByDepartment,
        queryProvisionBroadList,
      },
    }
  },
  watch: {
    item: {
      handler(val) {
				if (val) {
					this.initDictConfig()
				}
        if (val && val.provisionBroad) {
          this.initSmallType()
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
		initDictConfig() {
			// 采购大类
			initDictOptions('erp_material_category,category_name,id').then((res) => {
				if (res.success) {
					this.$set(this.dictOptions, 'provisionBroad', res.result)
				}
			})
			// 采购小类
			initDictOptions('erp_material_category,category_name,id').then((res) => {
				if (res.success) {
					this.$set(this.dictOptions, 'provisionSmall', res.result)
				}
			})
			// 物料名称
			initDictOptions('erp_material,material_name,id').then((res) => {
				if (res.success) {
					this.$set(this.dictOptions, 'materialName', res.result)
				}
			})
			// 单位
			initDictOptions('unit_type').then((res) => {
				if (res.success) {
					this.$set(this.dictOptions, 'unit', res.result)
				}
			})
		},
    initSmallType() {
      this.exportWarehouseChange(this.item.provisionBroad)
    },
    exportWarehouseChange(id) {
      this.smallList = []
      if (id) {
        this.findProvisionSmallList(id)
      }
    },
    findProvisionSmallList(value) {
      const parentId = value
      queryProvisionSmallList({ parentId }).then((res) => {
        if (res.success) {
          const data = res.result.map((item) => {
            return { id: item.id, categoryName: item.categoryName }
          })
          this.smallList = [data]
        } else {
          this.$u.toast(res.message)
        }
      })
    },
    handleEidtForm(item) {
      this.$emit('edit', [item, this.index])
    },
    handleRemoveForm(item) {
			uni.showModal({
				content: '确定删除吗？',
				success: res => {
					if (res.confirm) {
						this.$emit('remove', item)
					}
				}
			});
    },
  },
}
</script>

<style scoped lang="scss">
.inforamtion {
  margin-top: 10rpx;
  padding: 10rpx;
  border-radius: 15rpx;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
}
</style>